<template>
    <div>
        <!-- 轮播图 -->
        <el-carousel height='546px' arrow="never" trigger="click">
            <el-carousel-item v-for="item in photoes" :key="item.id">
                <a class="carousel-href" :href="item.Link">
                    <img class="carousel-img" :src="item.ImageUrl">
                </a>
            </el-carousel-item>
        </el-carousel>
    
        <!-- 实时动态 -->
        <div class="real-code">
            <div class="container">
                <div class="real-code-main clear">
                    <div class="real-code-item">
                        <div class="real-code-hd">比特币BTC</div>
                        <div class="real-code-bd">
                            <div class="all-money">¥16000.0000</div>
                            <div class="money clear">
                                <span class="now-money">¥271.10</span>
                                <span class="now-money">-0.57%</span>
                            </div>
                        </div>
                    </div>
                    <div class="real-code-item">
                        <div class="real-code-hd">莱特币LTC</div>
                        <div class="real-code-bd">
                            <div class="all-money" id="ltc_nowPrice">¥16000.0000</div>
                            <div class="money clear">
                                <span class="now-money" id="ltc_increment">¥271.10</span>
                                <span class="now-money" id="ltc_zhangfu">-0.57%</span>
                            </div>
                        </div>
                    </div>
                    <div class="real-code-item">
                        <div class="real-code-hd">普惠积分PHI</div>
                        <div class="real-code-bd">
                            <div class="all-money">¥16000.0000</div>
                            <div class="money clear">
                                <span class="now-money">交易量:
                                    <i>10</i>
                                </span>
                                <span class="now-money">涨幅:
                                    <i>10％</i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    
        <!-- 最新动态 -->
        <div class="news">
            <div class="container">
                <div class="news-main">
                    <div class="news-hd">
                        最新动态
                        <router-link to="/news" class="news-more">查看更多</router-link>
                    </div>
                    <div class="news-bd">
                        <div class="new-lastest clear">
                            <div class="new-lastest-Img">
                                <router-link :to="{path:'/News/NewsDetail/'+hotNews.Id}">
                                    <img :src="this.hotNews.NewsImgUrl" alt="">
                                </router-link>
                            </div>
                            <div class="new-lastest-main">
                                <div class="new-lastest-hd">
                                    <h3 class="new-lastest-title">
                                        <router-link :to="{path:'/News/NewsDetail/'+hotNews.Id}">
                                            {{hotNews.NewsTitle}}
                                        </router-link>
                                    </h3>
                                    <span class="new-lastest-time"></span>
                                </div>
                                <div class="new-lastest-bd">{{cutNewsHotText}}</div>
                            </div>
                        </div>
                        <div class="new-content clear">
                            <div class="new-item" v-for="item in news">
                                <div class="new-Img">
                                    <router-link :to="{path:'/News/NewsDetail/'+item.Id}">
                                        <img :src="item.NewsImgUrl" alt="">
                                    </router-link>
                                </div>
                                <div class="new-hd">
                                    <h4>
                                        <router-link :to="{path:'/News/NewsDetail/'+item.Id}">
                                            {{item.NewsTitle}}
                                        </router-link>
                                    </h4>
                                    <span class="new-time">{{item.CreateDate | CreateDateFilter}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    
        <!-- company -->
        <div class="container" style="padding-bottom: 60px;">
            <img src="./../assets/images/temp/company-Info.jpg" alt="">
        </div>
    </div>
</template>

<script>
import $ from 'jquery'
export default {
    data() {
        return {

            // 轮播图
            photoes: [],

            // 实时行情
            coins: {
                btcCoin: {
                    allMoney: '¥16000.0000',
                    noeMoney: '271.10',
                    status: '0.57%'
                }
            },


            // 新闻列表
            news: [],
            hotNews: {}
        }
    },

    // 过滤器
    filters: {
        CreateDateFilter(date) {
            let newDate = date.match(/[0-9]/g).join('');
            let newDateObj = new Date(parseInt(newDate));
            return newDateObj.getFullYear() + '-' + (newDateObj.getMonth() + 1) + '-' + newDateObj.getDate()
        }
    },
    // 计算属性
    computed: {
        cutNewsHotText() {
            let width = 480;
            let text = this.hotNews.NewsContentText
            if (typeof text === 'string') {
                return text.substr(0, width) + '...'
            }
        }
    },
    // 方法
    methods: {

    },
    // 渲染前函数
    mounted() {
        this.$nextTick(function () {
            // 轮播图
            $.get("http://192.168.0.155:155/api/Main/GetCarouselList", (res) => {
                this.photoes = res;
            })

            // 新闻列表
            $.post("http://192.168.0.155:155/api/Main/NewsList",
                {
                    PageSize: "4",
                    PageIndex: "1",
                    HasHot: "false"
                }, (res) => {
                    this.news = eval(res).data
                })

            // // 热推        
            $.get("http://192.168.0.155:155/api/Main/GetHotNews", (res) => {
                this.hotNews = res
            })

        })

    }
}
</script>

<style>
/* 轮播图 */

.carousel-href {
    position: relative;
    display: block;
    height: 546px;
}

.carousel-img {
    display: block;
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -960px;
    height: 546px;
}

.el-carousel__indicators {
    bottom: 20px;
}

.el-carousel__button {
    width: 80px;
    background: #aaa;
}

.is-active .el-carousel__button {
    background: #e4ed5a;
}



















/* 实时行情 */

.real-code-main {
    padding: 60px 0 0;
    width: 1230px;
}

.real-code-main .real-code-item {
    width: 378px;
    margin-right: 30px;
    float: left;
    border: 1px solid #c2d2dc;
}


.real-code-item .real-code-hd {
    font-size: 18px;
    color: #8f9295;
    background: #eef4f8;
    padding: 15px 20px;
}

.real-code-item .real-code-bd {
    padding: 15px 20px 20px;
    background: #fff;
}

.real-code-bd .all-money {
    font-family: 'Arial';
    font-size: 20px;
    color: #859ab7;
    margin-bottom: 5px;
    margin-top: 5px;
}

.real-code-bd .money .now-money {
    display: inline-block;
    width: 49%;
    font-size: 16px;
    color: #a3a3a3;
    font-family: 'Arial';
}
















/* 新闻 */

.news {
    min-height: 546px;
}

.news-main {
    padding: 60px 0;
}

.news-main .news-hd {
    font-size: 21px;
    padding-bottom: 10px;
}

.news-main .news-hd .news-more {
    float: right;
    font-size: 13px;
    color: #0096df;
    padding-top: 10px;
}















/* æœ€æ–°åŠ¨æ€ */

.new-lastest {
    margin-bottom: 20px;
}

.new-lastest .new-lastest-Img,
.new-lastest .new-lastest-Img img {
    width: 493px;
    height: 314px;
}

.new-lastest .new-lastest-Img {
    float: left;
}

.new-lastest .new-lastest-main {
    float: left;
    width: 707px;
}

.new-lastest-hd {
    padding: 0 20px;
}

.new-lastest-hd .new-lastest-title {
    color: #323232;
    font-size: 21px;
    font-weight: bold;
    margin-bottom: 5px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.new-lastest-hd .new-lastest-time {
    color: #969696;
}

.new-lastest-bd {
    font-size: 16px;
    padding: 11px 0;
    padding-left: 20px;
    overflow: hidden;
    text-align: justify;
    line-height: 150%;
}

.new-content {
    width: 1220px;
}

.new-content .new-item {
    float: left;
    width: 285px;
    margin-right: 20px;
}

.new-item .new-Img,
.new-item .new-Img img {
    width: 285px;
    height: 156px;
}

.new-item .new-hd {
    padding: 15px;
    border-bottom: 1px solid #eaeaea;
    border-left: 1px solid #eaeaea;
    border-right: 1px solid #eaeaea;
}

.new-item .new-hd h4 {
    font-size: 16px;
    font-weight: normal;
    margin-bottom: 5px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.new-item .new-hd .new-time {
    color: #c8c8c8;
}
</style>